<!DOCTYPE html>
<html>
<head>
  <title>旅游网站</title>
  <link rel="stylesheet" href="style.css">
  <style>
    /* 头部样式 */
    .header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    /* 导航栏样式 */
    .navbar {
      background-color: #333;
      overflow: hidden;
    }

    .navbar a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }

    .navbar a:hover {
      background-color: #ddd;
      color: black;
    }

    /* 下拉菜单样式 */
    .dropdown {
      float: left;
      overflow: hidden;
    }

    .dropdown .dropbtn {
      font-size: 17px;
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font-family: inherit;
      margin: 0;
    }

    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #ddd;
      color: black;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      float: none;
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }

    .dropdown-content a:hover {
      background-color: #ddd;
    }

    .dropdown:hover .dropdown-content {
      display: block;
    }

    /* 侧边栏样式 */
    .sidebar {
      width: 200px;
      height: 100%;
      background-color: #f1f1f1;
      position: fixed;
      overflow: auto;
    }

    .sidebar a {
      display: block;
      color: black;
      padding: 16px;
      text-decoration: none;
    }

    .sidebar a:hover {
      background-color: #ddd;
    }

    @media screen and (max-width: 576px) {
      .sidebar {
        display: none;
      }
    }

    /* 文章样式 */
    .content {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-gap: 20px;
      margin-left: 200px;
      padding: 20px;
    }

    .article {
      max-width: 100%;
      border: 1px solid #ddd;
      padding: 20px;
    }

    /* 页脚样式 */
    .footer {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }

    /* 轮播图样式 */
    .slideshow-container {
      max-width: 100%;
      position: relative;
      margin: auto;
    }

    .slideshow-container img {
      width: 100%;
      height: auto;
    }

    .slideshow-container .slide {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }

    .slideshow-container .slide.active {
      display: block;
    }
  </style>
</head>
<body>
  <div class="header">
    <h1>旅游网站</h1>
  </div>

  <div class="navbar">
    <a href="#">首页</a>
    <div class="dropdown">
      <button class="dropbtn">用户</button>
      <div class="dropdown-content">
        <a href="#">注册</a>
        <a href="denglu.html">登录</a>
      </div>
    </div>
    <a href="#">目的地</a>
    <a href="#">旅游路线</a>
    <a href="#">联系我们</a>
  </div>

  <div class="sidebar">
    <a href="#">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
    <a href="#">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
    <a href="#">侧边栏项目1</a>
    <a href="#">侧边栏项目2</a>
    <a href="#">侧边栏项目3</a>
    <a href="#">侧边栏项目4</a>
    
  </div>

  <div class="content">
    <div class="article">
      <div class="slideshow-container">
        <div class="slide active">
          <img src="img/big1.webp" alt="图片1">
        </div>
        <div class="slide">
          <img src="img/big01.webp" alt="图片2">
        </div>
        <div class="slide">
          <img src="img/big02.webp" alt="图片3">
        </div>
        <div class="list-container">
            <h1>列表框</h1>
            <ul>
             
              <li>列表项12</li>
              <li>列表项13</li>
              <li>列表项14</li>
              <li>列表项15</li>
              <li>列表项16</li>
              <li>列表项17</li>
              <li>列表项18</li>
              <li>列表项19</li>
              <li>列表项20</li>
            </ul>
          </div>
      </div>
    </div>

    <div class="article">
      <h2>文章标题</h2>
      <p>这是一篇关于旅游的文章内容。</p>
      新冠疫情背景下韩国旅游业的发展研究

鞍山文化旅游发展现状及对策研究

锡林郭勒草原旅游业的发展现状及对策

北京故宫旅游发展现状及对策研究

兴城市滨海旅游的现状与发展模式研究

凌海市采摘旅游的发展现状及对策分析

浅析特色美食旅游的价值及开发意义

盛京三陵的旅游发展现状与对策研究

辽宁省满族消费民俗发展趋势与旅游开发模式

国内海岛旅游发展现状及研究对策

盛京皇城旅游景区旅游发展现状及对策研究

老年人旅游发展现状及对策研究

山东省乡村旅游转型升级研究

海南旅游经济高质量发展研究

主题酒店市场营销策略研究—以上海迪士尼乐园酒店为例

西藏林芝地区生态旅游发展现状及对策研究

新冠疫情背景下铁岭旅游业的恢复和发展研究

沈阳农业生态旅游发展策略研究--以稻梦空间为例

基于SWOT分析的庄河市乡村旅游发展研究

试析饮食文化对旅游业的影响

滨海型城市旅游竞争力提升策略探究--以大连市为例

大连市乡村旅游开发的现状与对策的探讨

辽宁兴城古城保护性开发策略研究

大连乡村民宿个性化发展的探究--以大连市向阳村为例

贵州省乡村旅游发展研究

大连市生态旅游发展现状与对策探究

海南民俗文化旅游发展问题与对策研究

基于民俗文化的乡村旅游探究——以辽宁省大连市为例

浅论我国酒店会议服务

杭州西溪湿地生态旅游发展对策研究

西藏自治区民俗旅游发展对策研究

昭通市旅游资源开发对策研究

西藏旅游资源开发研究

遵义红色旅游发展研究

沈阳市冰雪旅游发展策略探析

辽宁冰雪旅游资源开发研究

旅游高质量背景下云南省旅游投诉研究

古北口旅游特色小镇现状及建设研究

辽宁省生态旅游发展研究

我国导游人员职业素养研究

大连市长海县海岛旅游发展研究

贵州历史文化资源的旅游开发和保护研究

中国朝鲜族影响下的韩国饮食旅游业发展研究——以紫阳洞中国饮食旅游文化街为例

中韩两国民俗旅游比较研究——以中国平遥和韩国龙仁为例

中韩两国旅游民宿发展比较研究

广州市增城区全域旅游发展研究

沈阳“九•一八”历史博物馆塑造红色旅游品牌的措施

韩国生态旅游的发展研究

中韩两国旅游发展的比较研究

户外音乐节与旅游产业的融合发展路径研究

体验视角下哈尔滨市生态农业旅游开发策略研究

黑龙江省赫哲族乡村旅游开发对策分析

郓城水浒文化旅游开发研究

“双减”政策下研学旅游发展策略探讨

疫情常态化背景下国内景区发展“云旅游”的对策分析

哈尔滨市“老道外”旅游开发研究

基于旅游者体验视角的故宫文博旅游产品开发与创新研究

广东开平赤坎镇旅游发展研究

饮食文化旅游开发策略分析

虚拟现实技术在博物馆中的应用研究

基于乡村振兴战略东吐莫村乡村旅游发展建议

后疫情时代主题乐园发展策略研究

网红经济对大学生旅游消费行为影响分析

文旅融合背景下鄂伦春民俗旅游发展策略研究

南京夫子庙旅游经济发展策略

文化创意视角下的城市旅游休闲街区建设研究

哈尔滨市夜间旅游开发对策研究

常态化疫情防控下旅游景区高质量发展策略研究

后疫情时代在线旅游发展路径探究

横店影视城影视旅游开发策略研究

疫情常态化背景下乡村旅游发展研究

互联网时代下网红对旅游目的地的影响

黑龙江省对俄边境旅游发展策略研究

基于体验经济的上海文化街区旅游发展对策研究

乡村振兴背景下湖州康养型民宿旅游发展

微旅游视域下传统村落的旅游发展路径研究

酒店品牌跨界合作探讨

绍兴市柯桥区乡村旅游发展策略研究

上海市研学旅游产品开发策略

后疫情时代上海市崇明岛民宿旅游发展策略分析

南京市慢淳乡村旅游专业合作社运营与管理研究

马鞍山李白文化旅游资源开发对策研究

国家级新区建设背景下青岛西海岸会展旅游发展对策

体验经济下博物馆文创产品新盈利模式研究

体验式旅游导向下老君山景区开发策略

网红经济背景下乡村旅游发展策略探究

南阳卧龙岗文化产业发展研究

武汉市宗教文化旅游资源开发研究

福建霍童古镇旅游发展研究

四川省冰雪旅游发展现状及对策分析

后疫情时代武汉旅游产品开发对策分析

贵州省高荡村民俗文化旅游发展对策分析

乡村振兴背景下少数民族特色小镇旅游发展研究

我国智慧酒店的发展问题及对策探讨

武山水帘洞遗产旅游资源开发与保护

云南省普洱市西盟佤族自治县旅游资源开发和保护对策研究

甘南藏族自治州生态旅游资源评价及开发对策研究

民族地区导游人员综合素养研究

自媒体对旅游业的影响研究

“互联网+”背景下新疆民族文化旅游发展研究

浅析乌鲁木齐市民俗旅游对策

阿图什市民俗文化旅游发展研究

阿勒泰地区冰雪民俗旅游开发研究

网络自媒体对新疆旅游业发展影响研究

新疆喀纳斯生态旅游保护与开发探究

户外音乐节与旅游产业的融合发展路径研究

体验视角下哈尔滨市生态农业旅游开发策略研究

黑龙江省赫哲族乡村旅游开发对策分析

郓城水浒文化旅游开发研究

“双减”政策下研学旅游发展策略探讨

疫情常态化背景下国内景区发展“云旅游”的对策分析

哈尔滨市“老道外”旅游开发研究

基于旅游者体验视角的故宫文博旅游产品开发与创新研究

广东开平赤坎镇旅游发展研究

饮食文化旅游开发策略分析
    </div>
  </div>

  <div class="footer">
    <p>版权所有 &copy; 2022 旅游网站</p>
  </div>

  <script>
    // JavaScript代码可以在这里添加

    // 轮播图逻辑
    var slides = document.querySelectorAll('.slide');
    var currentSlide = 0;

    function showSlide(n) {
      for (var i = 0; i < slides.length; i++) {
        slides[i].classList.remove('active');
      }
      slides[n].classList.add('active');
    }

    function nextSlide() {
      currentSlide++;
      if (currentSlide >= slides.length) {
        currentSlide = 0;
      }
      showSlide(currentSlide);
    }

    setInterval(nextSlide, 3000);
  </script>
</body>
</html>
